<!-- static/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arting-2API 测试面板</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="header">
                <h2>Arting-2API</h2>
                <p>v1.0</p>
            </div>

            <div class="form-group">
                <label for="api-key">API Key</label>
                <input type="password" id="api-key" placeholder="请输入您的 API Key" value="1">
            </div>

            <div class="form-group">
                <label for="model-select">基础模型 (Base Model)</label>
                <select id="model-select"></select>
            </div>
            
            <div class="form-group">
                <label for="lora-select">LoRA 模型 (可多选)</label>
                <select id="lora-select" multiple="multiple"></select>
            </div>

            <div class="form-group">
                <label for="prompt-input">提示词 (Prompt)</label>
                <textarea id="prompt-input" rows="4" placeholder="输入您的图像描述..."></textarea>
            </div>

            <div class="form-group">
                <label for="negative-prompt-input">负向提示词 (Negative Prompt)</label>
                <textarea id="negative-prompt-input" rows="3" placeholder="不想在图中看到的内容..."></textarea>
            </div>

            <div class="form-group">
                <label for="sampler-select">采样器 (Sampler)</label>
                <select id="sampler-select">
                    <option>Euler a</option>
                    <option>Euler</option>
                    <option>LMS</option>
                    <option>Heun</option>
                    <option>DPM2</option>
                    <option>DPM2 a</option>
                    <option>DPM++ 2S a</option>
                    <option>DPM++ 2M</option>
                    <option>DPM++ SDE</option>
                    <option>DPM fast</option>
                    <option>DPM adaptive</option>
                    <option>LMS Karras</option>
                    <option>DPM2 Karras</option>
                    <option>DPM2 a Karras</option>
                    <option>DPM++ 2S a Karras</option>
                    <option>DPM++ 2M Karras</option>
                    <option>DPM++ SDE Karras</option>
                    <option>DDIM</option>
                </select>
            </div>

            <div class="form-group slider-group">
                <div class="slider-label"><label>尺寸 (Ratio)</label></div>
                <div class="button-group" id="ratio-group">
                    <button data-size="512x768" class="active">2:3</button>
                    <button data-size="768x512">3:2</button>
                    <button data-size="512x1024">1:2</button>
                    <button data-size="1024x512">2:1</button>
                    <button data-size="768x768">1:1</button>
                </div>
            </div>

            <div class="form-group slider-group">
                <div class="slider-label">
                    <label for="steps-slider">步数 (Steps)</label>
                    <span id="steps-value">25</span>
                </div>
                <input type="range" id="steps-slider" min="10" max="100" step="1" value="25">
            </div>

            <div class="form-group slider-group">
                <div class="slider-label">
                    <label for="guidance-slider">CFG Scale</label>
                    <span id="guidance-value">7.0</span>
                </div>
                <input type="range" id="guidance-slider" min="1" max="20" step="0.1" value="7">
            </div>
            
            <div class="form-group slider-group">
                <div class="slider-label">
                    <label for="lora-weight-slider">LoRA Weight</label>
                    <span id="lora-weight-value">0.7</span>
                </div>
                <input type="range" id="lora-weight-slider" min="0" max="2" step="0.05" value="0.7">
            </div>

            <div class="form-group slider-group">
                <div class="slider-label">
                    <label for="count-slider">生成数量 (Number)</label>
                    <span id="count-value">1</span>
                </div>
                <input type="range" id="count-slider" min="1" max="4" step="1" value="1">
            </div>

            <div class="form-group">
                <label for="seed-input">种子 (Seed)</label>
                <input type="number" id="seed-input" value="-1">
            </div>

            <div class="form-group checkbox-group">
                <input type="checkbox" id="nsfw-toggle">
                <label for="nsfw-toggle">允许 NSFW 内容</label>
            </div>

            <button id="generate-btn">
                <span>生成图像</span>
            </button>
        </div>
        <div class="main-content">
            <div id="result-panel">
                <div id="placeholder" class="placeholder">
                    <p>请在左侧配置参数并开始生成</p>
                </div>
                <div id="spinner" class="spinner hidden"></div>
                <div id="error-message" class="error hidden"></div>
                <div id="image-grid"></div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="/static/script.js"></script>
</body>
</html>